<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>移动学术论坛</title>
    <link th:href="@{/js/navbar-fixed-top.css}" rel="stylesheet">
    <link th:href="@{/css/bootstrap.min.css}" type="text/css" rel="stylesheet">
    <style>
        body{
            background-color:lightgoldenrodyellow;
            /*background-color: #dff6e5;*/
        }
        #plate ul{
            list-style-type: none;
        }
        #plate span{
            font-size: 22px;
            font-family: 方正舒体;
        }
        #plate ul li {
            margin-top: 10px;
            background-color: #b2dba1;
            text-align: center;
            line-height: 30px;
            border-radius: 17px;
        }
        .cur_scan_name{
            display: block;
            font-size: 21px;
            font-family: 方正舒体;
            margin-top: 15px;
        }
        #cur_scan span{
            margin-top: 10px;
            margin-left: 5px;
            font-size: 20px;
            font-family: 方正舒体;
            display: inline-block;
            list-style-type: none;
            height: 25px;
            text-align: center;
            line-height: 25px;
            border-radius: 5px;
            background-color: #9acfea;
        }
        #posts_title span{
            margin-left: 15px;
        }
        #liuyan{
            width: 100%;
            list-style-type: none;
        }
        #liuyan img{
            width: 40px;
            height: 40px;
            border-radius: 50%;
        }
        .liuyan_touxiang{
            display: inline-block;
        }
        .liuyan_content{
            display: inline-block;
            margin-top: 5px;
            margin-left:15px;
        }
    </style>
</head>
<body >
<nav class="navbar navbar-default navbar-fixed-top" style="background-image: url(/img/bar.jpg)">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="/index">移动学术论坛</span></a>
        </div>
        <div class="navbar-collapse collapse">
            <ul id="navbar" class="nav navbar-nav">
                <li class="active"><a href="#index">主页</a></li>
                <li><a href="#about">关于论坛</a></li>
                <li><img th:src="@{/img/money.png}" style="height: 18px;width: 18px;"></li>
                <li><a href="#love">打赏论坛</a></li>
            </ul>
            <ul class="nav navbar-nav navbar-right" th:if="${userstatu}==0">
                <li><a href="/login">登录</a></li>
                <li><a href="/register">注册</a></li>
            </ul>
            <ul class="nav navbar-nav navbar-right" th:if="${userstatu}==1">
                <li><img th:src="${'/'+user.getImageAddr()}" style="height: 50px;width: 50px;border-radius: 50%"></li>
                <li><a th:href="${'/user/'+user.getUserId()}" th:text="${user.getUserName()}"></a></li>
            </ul>

        </div><!--/.nav-collapse -->
    </div>
</nav>
<div class="container">
    <div id="posts_title" style="padding: 5px; text-align: center">
        <div style="background-color: #9acfea;height: 40px;font-size: 30px;line-height: 40px"><span th:text="${posts.getPostsTitle()}"></span></div>
        <span>作者：<a th:href="'/user/'+${posts.user.getUserId()}" th:text="${posts.user.getUserName()}"></a></span>
        <span style="margin-left: 15px">创建时间：<p th:text="${posts.getPostsDate()}" style="display: inline"></p></span>
        <span style="margin-left: 15px">所属板块：<a th:href="'/showplate/'+${posts.plate.getPlateId()}" th:text="${posts.plate.getPlateName()}"></a></span>
        <span>点击：<p style="display: inline" th:text="${posts.getClick()}"></p></span>
        <span class="glyphicon glyphicon-thumbs-up" aria-hidden="true" style="color: gray;font-size: 32px;margin-top: 5px"></span>
    </div>
    <div style="margin-top:10px;background-color: #f5f5f5;border: 1px solid #ccc;border-radius: 4px;padding: 9.5px;word-break: break-all">
         <p th:text="${posts.getPostsContent()}"></p>
    </div>
    <div>
        <span style="margin-top: 20px;font-weight: bold;font-size: 30px">留言</span>
        <ul id="liuyan">
            <li>
                <div style="display: inline-block"><img th:src="@{/img/default-touxiang.jpg}"></div>
                <div style="display: inline-block;margin-top: 5px;margin-left:15px "><a href="#">打野网</a><br><p style="margin-left:15px ">这个人真的皮！！！！</p></div>
            </li>
            <li>
                <div style="display: inline-block"><img th:src="@{/img/default-touxiang.jpg}"></div>
                <div style="display: inline-block;margin-top: 5px;margin-left:15px "><a href="#">打野网</a><br><p style="margin-left:15px ">这个人真的皮！！！！</p></div>
            </li>
            <li>
                <div style="display: inline-block"><img th:src="@{/img/default-touxiang.jpg}"></div>
                <div style="display: inline-block;margin-top: 5px;margin-left:15px "><a href="#">打野网</a><br><p style="margin-left:15px ">这个人真的皮！！！！</p></div>
            </li>
            <li>
                <div style="display: inline-block"><img th:src="@{/img/default-touxiang.jpg}"></div>
                <div style="display: inline-block;margin-top: 5px;margin-left:15px "><a href="#">打野网</a><br><p style="margin-left:15px ">这个人真的皮！！！！</p></div>
            </li>
        </ul>
        <div style="float: right"><img th:src="@{/img/liuyan.png}">(<p style="display: inline" th:text="${posts.getReplyCount()}"></p>)</div>
        <hr style="clear: both">
        <div style="border: 2px solid #b2dba1;border-radius: 5px 5px 0 5px;clear: both">
         <input type="text" class="form-control" id="talk">
        </div>
        <button class="btn-success" style="float: right" id="post_liuyan">发布留言</button>



    </div>
</div>
<footer>
    <div class="footer-container">
        <div class="footer-link">
            <div class="footer-link-item">

            </div>
        </div>
    </div>
</footer>
<script th:src="@{/js/jquery-3.3.1.js}"></script>
<script th:src="@{/js/bootstrap.js}"></script>
<script>
    $(".num li").mouseover(function () {
        $(this).addClass("current").siblings().removeClass("current");
        var index = $(this).index();
        i = index;
        $(".img li").eq(index).fadeIn(1000).siblings().fadeOut(1000);
    });
    var time = setInterval(move,1500);
    var i=0;
    function move() {
        if (i==4){
            i=-1;
        }
        i++;
        $(".num li").eq(i).addClass("current").siblings().removeClass("current");
        $(".img li").eq(i).stop().fadeIn(1000).siblings().stop().fadeOut(1000);
    }
    function moveL(){
        if (i==0){
            i=5;
        }
        i--;
        $(".num li").eq(i).addClass("current").siblings().removeClass("current");
        $(".img li").eq(i).stop().fadeIn(1000).siblings().stop().fadeOut(1000);
    }
    $(".outer").hover(function () {
        clearInterval(time)
    },function () {
        time=setInterval(move,1500)
    })
    $(".left-btn").click(function () {
        move();
    });
    $(".right-btn").click(function () {
        move();
    })

</script>
<script>
    $("#post_liuyan").click(function () {
        var content = $("#talk").val();
        var ele = document.createElement("li");
        // <div style="display: inline-block"><img th:src="@{/img/default-touxiang.jpg}"></div>
    // <div style="display: inline-block;margin-top: 5px;margin-left:15px "><a href="#">打野网</a><br><p style="margin-left:15px ">这个人真的皮！！！！</p></div>
        var div = document.createElement("div");
        $(div).addClass("liuyan_touxiang");
        var img = document.createElement("img");
        img.setAttribute("src","/img/default-touxiang.jpg");
        $(img).appendTo(div);
        $(div).appendTo(ele);
        var div2 = document.createElement("div");
        $(div2).addClass("liuyan_content");
        var a = document.createElement("a");
        a.innerHTML="我是一个愤青";
        $(a).appendTo(div2);
        var br = document.createElement("br");
        $(br).appendTo(div2);
        var p = document.createElement("p");
        p.innerHTML = content;
        $(p).attr("style","margin-left:15px");
        $(p).appendTo(div2);
        $(div2).appendTo(ele);
        $("#liuyan").append(ele);
    })
</script>
</body>
</html>